<template>
	<view class="container">
		<!-- 头部 -->
		<view class="header">
			<view class="header-content">
				<text class="title">消息动态</text>
				<text class="subtitle">查看所有接收到的消息记录</text>
			</view>
			<view class="header-actions">
				<view class="refresh-btn" @tap="refreshHistory">
					<uni-icons type="refreshempty" size="20" color="#007AFF" />
				</view>
				<view class="clear-btn" @tap="showClearConfirm">
					<uni-icons type="trash" size="18" color="#FF3B30" />
				</view>
			</view>
		</view>
		
		<!-- 统计信息 -->
		<view class="stats-section">
			<view class="stat-item">
				<text class="stat-number">{{ messageHistory.length }}</text>
				<text class="stat-label">总消息数</text>
			</view>
			<view class="stat-item">
				<text class="stat-number">{{ todayCount }}</text>
				<text class="stat-label">今日消息</text>
			</view>
			<view class="stat-item">
				<text class="stat-number">{{ unreadCount }}</text>
				<text class="stat-label">未读消息</text>
			</view>
		</view>
		
		<!-- 消息过滤 -->
		<view class="filter-section">
			<view class="filter-tabs">
				<view 
					class="filter-tab" 
					:class="{ active: activeFilter === 'all' }" 
					@tap="setFilter('all')"
				>
					<text class="filter-text">全部</text>
				</view>
				<view 
					class="filter-tab" 
					:class="{ active: activeFilter === 'system' }" 
					@tap="setFilter('system')"
				>
					<text class="filter-text">系统消息</text>
				</view>
				<view 
					class="filter-tab" 
					:class="{ active: activeFilter === 'homework' }" 
					@tap="setFilter('homework')"
				>
					<text class="filter-text">作业通知</text>
				</view>
				<view 
					class="filter-tab" 
					:class="{ active: activeFilter === 'ai' }" 
					@tap="setFilter('ai')"
				>
					<text class="filter-text">AI助手</text>
				</view>
			</view>
		</view>
		
		<!-- 消息列表 -->
		<scroll-view 
			class="message-list" 
			scroll-y="true"
			refresher-enabled="true"
			:refresher-triggered="refreshing"
			@refresherrefresh="onRefresh"
			@refresherrestore="onRestore"
		>
			<view v-if="filteredMessages.length === 0" class="empty-state">
				<view class="empty-icon">
					<uni-icons type="chatboxes" size="60" color="#CCCCCC" />
				</view>
				<text class="empty-text">暂无消息记录</text>
				<text class="empty-hint">登录系统后会自动记录消息</text>
			</view>
			
			<view v-else class="messages">
				<view 
					v-for="(message, index) in filteredMessages" 
					:key="message.id" 
					class="message-item"
					:class="{ 'system-message': message.type === 'system' }"
					@tap="viewMessage(message)"
				>
					<!-- 消息头像 -->
					<view class="message-avatar">
						<view v-if="message.avatar" class="avatar-image">
							<image :src="message.avatar" mode="aspectFill" />
						</view>
						<view v-else class="avatar-default" :class="getAvatarClass(message.type)">
							<uni-icons 
								:type="getMessageIcon(message.type)" 
								size="20" 
								color="white" 
							/>
						</view>
					</view>
					
					<!-- 消息内容 -->
					<view class="message-content">
						<view class="message-header">
							<text class="sender-name">{{ message.fromUser }}</text>
							<text class="message-time">{{ message.displayTime }}</text>
						</view>
						<text class="message-text">{{ message.content }}</text>
						
						<!-- 消息类型标签 -->
						<view v-if="message.type !== 'text'" class="message-type">
							<text class="type-text">{{ getTypeText(message.type) }}</text>
						</view>
					</view>
					
					<!-- 消息状态 -->
					<view class="message-status">
						<view v-if="message.isWelcome" class="welcome-badge">
							<text class="badge-text">欢迎</text>
						</view>
						<uni-icons type="right" size="14" color="#CCCCCC" />
					</view>
				</view>
			</view>
		</scroll-view>
		
		<!-- 清空确认弹窗 -->
		<view v-if="showClearDialog" class="modal-overlay" @tap="hideClearConfirm">
			<view class="modal-content" @tap.stop>
				<view class="modal-header">
					<text class="modal-title">确认清空</text>
				</view>
				<view class="modal-body">
					<text class="modal-text">确定要清空所有消息记录吗？此操作不可恢复。</text>
				</view>
				<view class="modal-actions">
					<button class="modal-btn cancel" @tap="hideClearConfirm">取消</button>
					<button class="modal-btn confirm" @tap="confirmClear">确定</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, computed, onMounted } from 'vue'
	import messageManager from '@/utils/message-manager.js'
	
	// 响应式数据
	const messageHistory = ref([])
	const activeFilter = ref('all')
	const refreshing = ref(false)
	const showClearDialog = ref(false)
	
	// 计算属性
	const filteredMessages = computed(() => {
		if (activeFilter.value === 'all') {
			return messageHistory.value
		}
		return messageHistory.value.filter(msg => msg.type === activeFilter.value)
	})
	
	const todayCount = computed(() => {
		const today = new Date().toDateString()
		return messageHistory.value.filter(msg => {
			const msgDate = new Date(msg.timestamp).toDateString()
			return msgDate === today
		}).length
	})
	
	const unreadCount = computed(() => {
		// 这里可以根据实际需求实现未读逻辑
		return 0
	})
	
	// 方法
	const loadMessageHistory = () => {
		messageHistory.value = messageManager.getMessageHistory()
		console.log('加载消息历史:', messageHistory.value.length, '条')
	}
	
	const refreshHistory = () => {
		loadMessageHistory()
		uni.showToast({
			title: '刷新成功',
			icon: 'success',
			duration: 1500
		})
	}
	
	const setFilter = (filter) => {
		activeFilter.value = filter
	}
	
	const onRefresh = () => {
		refreshing.value = true
	}
	
	const onRestore = () => {
		refreshing.value = false
		loadMessageHistory()
	}
	
	const showClearConfirm = () => {
		if (messageHistory.value.length === 0) {
			uni.showToast({
				title: '暂无消息记录',
				icon: 'none'
			})
			return
		}
		showClearDialog.value = true
	}
	
	const hideClearConfirm = () => {
		showClearDialog.value = false
	}
	
	const confirmClear = () => {
		messageManager.clearHistory()
		loadMessageHistory()
		hideClearConfirm()
		uni.showToast({
			title: '清空成功',
			icon: 'success'
		})
	}
	
	const viewMessage = (message) => {
		// 显示消息详情或执行相关操作
		uni.showModal({
			title: message.fromUser,
			content: message.content,
			showCancel: false,
			confirmText: '知道了'
		})
	}
	
	const getAvatarClass = (type) => {
		switch (type) {
			case 'system':
				return 'avatar-system'
			case 'homework':
				return 'avatar-homework'
			case 'ai':
				return 'avatar-ai'
			default:
				return 'avatar-default-user'
		}
	}
	
	const getMessageIcon = (type) => {
		switch (type) {
			case 'system':
				return 'gear'
			case 'homework':
				return 'compose'
			case 'ai':
				return 'help'
			default:
				return 'person'
		}
	}
	
	const getTypeText = (type) => {
		switch (type) {
			case 'system':
				return '系统消息'
			case 'homework':
				return '作业通知'
			case 'ai':
				return 'AI助手'
			default:
				return '普通消息'
		}
	}
	
	// 生命周期
	onMounted(() => {
		loadMessageHistory()
	})
</script>

<style scoped>
	.container {
		min-height: 100vh;
		background: #f5f5f5;
	}
	
	.header {
		background: #fff;
		padding: 40rpx 30rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid #eee;
	}
	
	.header-content {
		flex: 1;
	}
	
	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 10rpx;
	}
	
	.subtitle {
		font-size: 24rpx;
		color: #666;
	}
	
	.header-actions {
		display: flex;
		gap: 20rpx;
		align-items: center;
	}
	
	.refresh-btn, .clear-btn {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		background: #f8f9fa;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.refresh-btn:active, .clear-btn:active {
		opacity: 0.6;
		transform: scale(0.95);
	}
	
	.stats-section {
		background: #fff;
		margin: 20rpx 30rpx;
		padding: 30rpx;
		border-radius: 16rpx;
		display: flex;
		justify-content: space-around;
	}
	
	.stat-item {
		text-align: center;
		flex: 1;
	}
	
	.stat-number {
		font-size: 40rpx;
		font-weight: bold;
		color: #007AFF;
		display: block;
		margin-bottom: 8rpx;
	}
	
	.stat-label {
		font-size: 24rpx;
		color: #666;
	}
	
	.filter-section {
		background: #fff;
		margin: 0 30rpx 20rpx;
		border-radius: 16rpx;
		padding: 20rpx;
	}
	
	.filter-tabs {
		display: flex;
		background: #f8f9fa;
		border-radius: 12rpx;
		padding: 6rpx;
	}
	
	.filter-tab {
		flex: 1;
		text-align: center;
		padding: 16rpx 0;
		border-radius: 8rpx;
		transition: all 0.2s ease;
	}
	
	.filter-tab.active {
		background: #007AFF;
	}
	
	.filter-text {
		font-size: 26rpx;
		color: #666;
	}
	
	.filter-tab.active .filter-text {
		color: white;
		font-weight: 500;
	}
	
	.message-list {
		flex: 1;
		height: calc(100vh - 600rpx);
		padding: 0 30rpx;
	}
	
	.empty-state {
		text-align: center;
		padding: 120rpx 0;
	}
	
	.empty-icon {
		margin-bottom: 30rpx;
	}
	
	.empty-text {
		font-size: 32rpx;
		color: #999;
		display: block;
		margin-bottom: 10rpx;
	}
	
	.empty-hint {
		font-size: 24rpx;
		color: #CCCCCC;
	}
	
	.messages {
		padding-bottom: 40rpx;
	}
	
	.message-item {
		background: #fff;
		border-radius: 16rpx;
		padding: 24rpx;
		margin-bottom: 20rpx;
		display: flex;
		align-items: flex-start;
		gap: 20rpx;
		transition: all 0.2s ease;
	}
	
	.message-item:active {
		transform: scale(0.98);
		opacity: 0.8;
	}
	
	.message-item.system-message {
		border-left: 6rpx solid #007AFF;
	}
	
	.message-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		overflow: hidden;
		flex-shrink: 0;
	}
	
	.avatar-image {
		width: 100%;
		height: 100%;
	}
	
	.avatar-image image {
		width: 100%;
		height: 100%;
	}
	
	.avatar-default {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
	}
	
	.avatar-system {
		background: linear-gradient(135deg, #007AFF, #5AC8FA);
	}
	
	.avatar-homework {
		background: linear-gradient(135deg, #34C759, #30D158);
	}
	
	.avatar-ai {
		background: linear-gradient(135deg, #AF52DE, #BF5AF2);
	}
	
	.avatar-default-user {
		background: linear-gradient(135deg, #FF9500, #FFCC02);
	}
	
	.message-content {
		flex: 1;
		min-width: 0;
	}
	
	.message-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 12rpx;
	}
	
	.sender-name {
		font-size: 28rpx;
		font-weight: 600;
		color: #333;
	}
	
	.message-time {
		font-size: 22rpx;
		color: #999;
	}
	
	.message-text {
		font-size: 26rpx;
		color: #666;
		line-height: 1.5;
		word-break: break-all;
	}
	
	.message-type {
		margin-top: 12rpx;
	}
	
	.type-text {
		font-size: 20rpx;
		color: #007AFF;
		background: #E3F2FD;
		padding: 4rpx 12rpx;
		border-radius: 12rpx;
	}
	
	.message-status {
		display: flex;
		align-items: center;
		gap: 10rpx;
		flex-shrink: 0;
	}
	
	.welcome-badge {
		background: #FFE4E1;
		padding: 4rpx 8rpx;
		border-radius: 8rpx;
	}
	
	.badge-text {
		font-size: 18rpx;
		color: #FF6B6B;
	}
	
	/* 弹窗样式 */
	.modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1000;
	}
	
	.modal-content {
		background: #fff;
		border-radius: 16rpx;
		width: 80%;
		max-width: 500rpx;
	}
	
	.modal-header {
		padding: 40rpx 30rpx 20rpx;
		text-align: center;
		border-bottom: 1rpx solid #eee;
	}
	
	.modal-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}
	
	.modal-body {
		padding: 30rpx;
		text-align: center;
	}
	
	.modal-text {
		font-size: 26rpx;
		color: #666;
		line-height: 1.5;
	}
	
	.modal-actions {
		display: flex;
		border-top: 1rpx solid #eee;
	}
	
	.modal-btn {
		flex: 1;
		height: 88rpx;
		border: none;
		background: none;
		font-size: 28rpx;
		border-radius: 0;
		margin: 0;
	}
	
	.modal-btn.cancel {
		color: #666;
		border-right: 1rpx solid #eee;
	}
	
	.modal-btn.confirm {
		color: #FF3B30;
		font-weight: 600;
	}
	
	.modal-btn:active {
		background: #f5f5f5;
	}
</style>






















